<template>
	<uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
		<view class="red" @click="open">
			<view class="title">{{ redpacketInfo.title }}</view>
		</view>
		<view class="chose" @click="popup.close()"></view>
	</uni-popup>
	<uni-popup ref="wxCode" type="center" mask-background-color="rgba(0,0,0,0.9)">
		<view class="wxCode_container">
			<image src="@/static/images/redPacket/gzh.jpg" mode="scaleToFill"></image>
		</view>
	</uni-popup>
	<proceeds ref="proceedsRef" :redPackage="redPackage" />
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		nextTick
	} from "vue"
	import proceeds from "@/components/proceeds"
	import {
		GetUnreceivedRedpackets,
		ReceiveRedpacket
	} from "@/api/general.js"
	onShow(() => {
		nextTick(() => {
			checkUnreceivedRedpacket()
		})
	})
	
	const emit = defineEmits(['updataParentInfo']);
	
	let popup = ref(null)
	
	let redpacketInfo = ref({
		title: null,
		DataType: null,
		OrderId: null,
	})

	// 查询未领取的红包并弹出---(dataType: 1-月排行榜红包，2-阅读任务红包)
	async function checkUnreceivedRedpacket() {
		let res = await GetUnreceivedRedpackets()
		if (res.dataType && res.orderId) {
			redpacketInfo.value = {
				title: res.dataType == 1 ? "月排行榜奖励" : "阅读任务奖励",
				DataType: res.dataType,
				OrderId: res.orderId,
			}
			popup.value.open()
		}
	}
	// 弹出师徒收益红包(dataType: 3-师徒收益红包)
	function openApprenticeRedpacket(orderId) {
		redpacketInfo.value = {
			title: "师徒收益奖励",
			DataType: 3,
			OrderId: orderId,
		}
		popup.value.open()
	}

	// 微信到动画特效组件
	let proceedsRef = ref(null)
	let redPackage = ref(0)
	// 微信关注公众号弹框
	let wxCode = ref(null)
	
	// 打开红包
	async function open() {
		try{
			const params = {
				DataType: redpacketInfo.value.DataType,
				OrderId: redpacketInfo.value.OrderId
			}
			let res = await ReceiveRedpacket(params)
			// isSubscribed 是否关注微信公众号
			if(res.isSubscribed) { 
				if(res.amount) {
					redPackage.value = res.amount
					popup.value.close()
					proceedsRef.value.popup.open()
					// 领取师徒收益后，更新师徒收益页面状态
					if(redpacketInfo.value.DataType === 3) {
						emit('updataParentInfo')
					}
				}
			}else {
				wxCode.value.open()
			}
		}catch(e){
			//TODO handle the exception
			console.log(e);
			uni.showToast({
				icon: "none",
				title: "未知错误",
				mask: true
			})
		}
	}
	
	defineExpose({
		popup,
		openApprenticeRedpacket
	})
</script>

<style lang="scss" scoped>
	.red {
		width: 576rpx;
		height: 741rpx;
		background: center/100% 100% url(@/static/images/redPacket/1.png);
		position: relative;

		.title {
			font-size: 56rpx;
			color: rgb(232, 211, 159);
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 50rpx;
			white-space: nowrap;
		}
	}

	.chose {
		width: 50rpx;
		height: 50rpx;
		background: center/100% 100% url(@/static/images/redPacket/×.png);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -80rpx;
	}
	
	.wxCode_container {
		width: 583rpx;
		height: 521rpx;
		background: center/100% 100% url(@/static/images/redPacket/gzh-bg.png);
		position: relative;
		
		image {
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			left: 140rpx;
			top: 145rpx;
		}
	}
</style>